<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div {
				display: block;
				margin: auto;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid brown; display: block; margin: auto;"></canvas>
		<script src="js/digit.js"></script>
		<script>
			window.onload = function() {
				var canvas = document.getElementById("canvas");
				var cxt = canvas.getContext("2d");
				canvas.width = 800;
				canvas.height = 600;
				var r = 5;
				var x=50;
				var y=100;
				var colors=["#33ff11","#ff00ff","#000000","#999999","#909011","#ff0000","#ffff00",
			  "#bb33dd","#5609ff","#bFb0ff"];
				window.setInterval(function() {
					cxt.clearRect(0, 0, canvas.width, canvas.height);
					var today = new Date();
					var h = today.getHours();
					var m = today.getMinutes();
					var s = today.getSeconds();
					var s1 = Math.floor(s % 10);
					var s10 = Math.floor(s / 10);
					var m1 = Math.floor(m % 10);
					var m10 = Math.floor(m / 10);
					var h1 = Math.floor(h % 10);
					var h10 = Math.floor(h/ 10);
					digit(s1, 43*2*r);
					digit(s10, 36*2*r);
					digit(h1, 7*2*r);
					digit(h10, 0);
					digit(m1, 25*2*r);
					digit(m10, 18*2*r);
					addcolon(14*2*r);
					addcolon(32*2*r);
					
					function addcolon(dis){
						for (i = 0; i < 10; i++) {
							for (j = 0; j < 4; j++) {
								if (colon[i][j] == 1) {
									cxt.beginPath();
									cxt.fillStyle = "yellow";
									cxt.arc(dis +x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
									cxt.fill();
									cxt.closePath();
								}
							}
						}
					}

					function digit(time, dis) {
						switch (time) {

							case 0:
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (n0[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)];
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;

							case 1:
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (n1[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle =colors[Math.floor(Math.random()*10)];
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;

							case 2:
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (n2[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)];
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;
							case 3:
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (n3[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)];
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;
							case 4:
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (n4[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = colors[Math.floor(Math.random()*10)];
											cxt.arc(dis +x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();

										}
									}
								}
								break;
							case 5:
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (n5[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = "blue";
											cxt.arc(dis +x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;
							case 6:
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (n6[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = "blue";
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;
							case 7:
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (n7[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = "blue";
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;

							case 8:
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (n8[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = "blue";
											cxt.arc(dis + x + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;
							case 9:
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (n9[i][j] == 1) {
											cxt.beginPath();
											cxt.fillStyle = "blue";
											cxt.arc(dis + x  + 2 * r * j, y + 2 * r * i, r, 0, 2 * Math.PI);
											cxt.fill();
											cxt.closePath();
										}
									}
								}
								break;


						}
					}



				}, 200);



			}
		</script>
	</body>
</html>
